<script>
  import {
    ref,
    computed,
    watch,
    getCurrentInstance
  } from 'vue';

  export default {
    setup(){
      const {ctx} = getCurrentInstance();
      console.log(ctx.$router.currentRoute.value)

      let count = ref(0);

      const doubleCount = computed(()=>{
        return count.value *2
      })

      const a = computed(() => {
        return ctx.$store.state.test.a
      })

      watch(() => count.value, val => {
        console.log(`count is ${val}`)
      })

      let add = ()=>{
        count.value++
      };

      let update = () => {
        ctx.$store.commit('setTestA',count)
      }
      return {
        count,
        a,
        doubleCount,
        add,
        update,
      }
    }
  }
</script>

<template>
  <div class="test">
    <h1>test count: {{count}}</h1>
    <p @click="add">count加一</p>
    <div>count * 2 = {{doubleCount}}</div>
    <div>state from vuex {{a}}</div>
    <p @click="update">update a</p>
  </div>
</template>

<style lang="less" scoped>
.test {
  color: red;
}
</style>
